import React, { Component } from 'react';
import './index.scss';

class ScalePopup extends Component {

	constructor(props) {
		super(props)
		this.videoPopRef = React.createRef()
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.needScroll) {
			if (!nextProps.visible) {
				document.body.style.position = ''
			} else {
				document.getElementById('root').style.transform = `translateY(-${window.scrollY}px)`
				document.body.style.position = 'fixed'
			}
		}
	}

	componentDidMount() {
		// 滚动击穿问题, 
		if (!this.props.needScroll) {
			this.videoPopRef.current.addEventListener('touchmove', e => {
				e.preventDefault()
			}, { passive: false })
		}
	}

	close = () => {
		const { onClose } = this.props
		if (onClose) onClose()
	}

	render() {
		const { visible, children } = this.props
		return (
			<div className={['scale-info-popup', visible ? 'scale-info-md-show' : ''].join(' ')} ref={this.videoPopRef}>
				<div className="mask" onClick={this.close}></div>
				<div className={["pop-content", 'scale'].join(' ')} >
					{children}
				</div>
			</div>
		)
	}
}

export default ScalePopup